<template>
  <el-dialog
    :title="dialogAttr.title"
    :visible.sync="dialogShow"
    width="600px"
    append-to-body
    class="form-dialog"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12" v-if="form.userId == undefined">
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属部门" prop="deptId">
            <treeselect
              v-model="form.deptId"
              :options="deptList"
              :show-count="true"
              placeholder="请选择归属部门"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请输入手机号码"
              maxlength="11"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.userId == undefined">
          <el-form-item label="用户密码" prop="password">
            <el-input
              v-model="form.password"
              placeholder="请输入用户密码"
              type="password"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="角色" prop="roleIds">
            <el-select v-model="form.roleIds" multiple placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import { statusOptions, initForm, rules } from "./options";
import { add, edit } from "@/api/sys/user";
// import { mapGetters } from "vuex";
const stateObj = {
  add: {
    title: "添加用户",
    fn: add,
  },
  edit: {
    title: "编辑用户",
    fn: edit,
  },
};
export default {
  props: {
    deptOptions: {
      default: () => [],
    },
  },
  components: { Treeselect },
  computed: {
    deptList() {
      let rows = [...this.deptOptions];
      const fn = (list) => {
        for (let item of list) {
          item.label = item.deptName;
          if (item.children && item.children.length > 0) {
            fn(item.children);
          }
        }
      };
      fn(rows);
      return rows;
    },
  },
  data() {
    return {
      form: {},
      rules,
      dialogAttr: stateObj.add,
      dialogShow: false,
      roleOptions: [],
      statusOptions,
      shipList: [],
    };
  },
  methods: {
    open(type, row = initForm()) {
      this.dialogAttr = stateObj[type];
      this.form = Object.assign({}, initForm(), row);
      this.dialogShow = true;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let row = { ...this.form };
          this.dialogAttr
            .fn(row)
            .then(() => {
              this.$message.success("操作成功！");
              this.$emit("submit_success");
              this.close();
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        }
      });
    },
    close() {
      this.dialogShow = false;
      setTimeout(() => {
        this.form = initForm();
      }, 500);
    },
    userTypeChange() {
      this.form.shipId = "";
      this.form.roleIds = [];
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.form-dialog {
  &::v-deep .el-form-item {
    height: 40px;
  }
}
</style>
